<h2>Scripts</h2>
<div class="contents">
<div class="sub2">Tuturial <i>i</i>Scr<i>i</i>ptDes<i>i</i>gn </div>
<div class="sub">Script your design</div>
This section is aimed at leveraging the power of javascript into your SVG design. Take a look at the <a class="template" href="parameters.jsvg">graphic's script</a> behind 
this text. It looks like a weird escalator stairs. You can modify two parameters: the number of steps and the step height. As you've seen above this is done by the 
@{} directives. The actual svg looks rather strange:
<pre>
&lt;path id="escalator" d="M30 30 #{stairs(isd_steps, isd_step_height)} #{curveback(isd_steps*isd_step_width, isd_steps*isd_step_height)}"/>
</pre>
Kind of strange isn't it? It is not really the text you're expecting, you probably expected something like "l 15 0 l 0 15" and that repeated for a number of times.
Well when you look at the export you'll see something like that. So what magic is going on behind the scenes? <br/>
I have defined a function which will return the text for the stairs. That text is processed by the SVG renderer in you browser to the stairs you see on the screen.
#{stairs(isd_steps, isd_step_height)} will call the function stairs which I have defined:
<pre>
${
1 isd_step_width=15;
2 stairs = function s (number_of_steps, step_height) {
3    result = "";
4    for (i=0;i&lt;number_of_steps;i++) {
5        result += " l " + isd_step_width + " 0  0 " + step_height;
6    }
7    return result
8};
}$
</pre> 
first look at the declaration of isd_step_width. That's assigned the value of 15, and cannot be changed by your clients. So you may wonder what is the reason for that
variable. Well you client surfing your application can not change it, but you, the owner of your script, may change it later at some point after you change
your mind about your design or a specific customers request for a certain change in dimensions which is not provided by the floating panel 
(And than you can ask a reasonable fee)<br/>
<div class="sub">Premier functions</div>
A programmer wont have any difficulty understanding the assignment above. However the second line may even leave the seasoned programmer bewildered. Especially
when they haven't heard about first class functions, a feature supported by 
Javascript and indispensable for iScriptDesign. Instead of assigning a value to a variable you assign a function to a variable which you can use the same way,
you would have used the function. In the example above stairs is a variable which behaves just like a function.<br/>
You may want to take a deep breath before we continue with the function itself. Stairs takes 2 arguments: the number_of_steps and the step_height. By declaring 
a function like this we can use this function also at other places (When designing a typical Amsterdam step gabled house, or a serrated knife). When call this
in the path's d-attribute, we pass in the parameters isd_steps, and isd_step_height but with the knife we may have passed in the serration's height and width.
The function stairs above is also an example how not to write a function as it is using the variable isd_step_with which is not in stair's parameter list, 
but declared outside the function, making stairs useless for anywhere but this stupid graph.<br/>
<div class="sub">return result</div>
At the end of the function stairs (line 7), you see the statement "return result;" So after stairs is evaluated #{stairs(isd_steps, isd_step_height)} is replaced by
the value of result. In this case result contains the repeated text "l 15 0 l 0 15". But how do we get that into result?
In line 3 you see the first occurrence of result, it gets assigned the value "". "" is not a number, instead it is a piece of text, alas a completely, 
totally empty piece of text. In order to fill it we must start to repeat a few "steps". Javascript knows a few ways for repetition, the for loop used in
the example, maybe the most widely known and used. <br/>
<div class="sub">for loops</div>
The for loop starts with key word for, followed by 3 statements separated by semicolons (;)
The first statement is the initialization, it tells with what we start the for loop. In our example we simply state that we assign 0 to the variable i.
i is a common name for a loop parameter, but you might also have called it, j or x or runner. As long as you don't use any of the names already in use in your
script, unless you really know what you are doing.<br/>
<div class="sub">stopping with for loops</div>
Second statement is the condition when the for loop should continue. I our example the for loop must continue as long as i, is smaller than number_of_steps.
Third statement is loop statement, it tells what must happen when the for loop gets executed. i++ Means add one to i's current value, so if it was 0, make it 1.
and if i happened to be 5 make it 6. This all gets executed as long as the condition in the second statement is fulfilled.
And then we have the most important part of the loop the so called body. The body is everything between the { directly following the for loop and it's
corresponding }. (Javascript is perfectly capable of finding corresponding }, so you don't have to worry about having more than one nested {} pairs).
<br/>
<div class="sub">Body</div>line 5 is right between the {} and that line gets executed every time i gets an incremented with one. First we start with 0 and we continue until i is equal or greater 
than number_of_steps. Experiment with different values for "number of steps" in the floating panel, and see what happens. line 5 tells to append ('+' is 
javascript's operator for string concatenation) a new string 
to the variable result (+= is a short hand notation for result = result + isd_step_width + " 0  0 " + step_height ). First time result was totally empty and after " l 15 0 0 15" is appended, its value is of course "l 15 0 0 15". Second time "l 15 0 0 15"
gets appended again so that makes result " l 15 0 0 15 l 15 0 0 15" (the values of isd_step_width and step_height are both 15), as long as i is smaller than
number_of_steps.
</br>
<div class="sub">End</div>
This was probably a lot of information, and hard to understand especially if this is your first encounter with a programming language. All I can say is start
experimenting yourself and don't give up after one or more drawbacks. Below some more references to help you get start
<a class="reference" href="http://en.wikipedia.org/wiki/First-class_function">first class functions</a>
<a class="reference" href="http://www.w3schools.com/js/js_functions.asp">javascript functions</a>
<a class="reference" href="http://www.w3schools.com/js/js_loop_for.asp">javascript for loop.</a>
<a class="reference" href="http://www.quirksmode.org/js/strings.html">javascript strings</a>


     
</div>
